<script setup>
import { ref } from 'vue';

const props = defineProps(['items', 'valueField', 'textField']);
const emit = defineEmits(['update:selected']);

const isOpenItems = ref(false)
// selected_items is a set of item's index
const selected_items_index = ref(new Set())

function toggleSelect() {
    isOpenItems.value = !isOpenItems.value
}

function toggleOption(item_index) {
    if (selected_items_index.value.has(item_index)) {
        selected_items_index.value.delete(item_index)
    } else {
        selected_items_index.value.add(item_index)
    }
    emit('update:selected', Array.from(selected_items_index.value))
}

</script>
<template>

    <div class="multiple-select">
        <div class="multiple-select-selected" @click="toggleSelect">
            <span v-if="selected_items_index.size == 0">请选择</span>
            <span v-else v-for="(item_index, index) in selected_items_index"
                :key="index">{{ props.items[item_index][props.textField] }}</span>
            <img src="/src/assets/images/student/arrow-down.svg" alt="Arrow-down" width="22"
                :class="{ 'rotate': isOpenItems }">
        </div>
        <div class="multiple-select-items" :class="{ 'open': isOpenItems }">
            <div v-for="(item, index) in props.items" :key="index" @click="toggleOption(index)"
                :class="{ 'selected': selected_items_index.has(index) }">{{ item[props.textField] }}</div>
        </div>
    </div>

</template>
<style scoped>
.multiple-select {
    padding: 9px 17px 11px 17px;
    margin: 5px 0 5px 0;
    display: inline-block;
    border: solid 1px #8a8a8a;
    background-color: transparent;
    border-radius: 10px;
    height: 36px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    position: relative;
}

.multiple-select>.multiple-select-selected {
    cursor: pointer;
    user-select: none;
}

.multiple-select>.multiple-select-selected>span {
    margin-right: 10px;
    background-color: #8a8a8a;
    color: #ffffff;
}

.multiple-select>.multiple-select-selected>img {
    position: absolute;
    top: 9px;
    right: 17px;
    transition: transform 0.25s;
}

.multiple-select>.multiple-select-selected>img.rotate {
    transform: rotate(-180deg);
}

@keyframes open {
    from {
        opacity: 0;
        top: 50%;
    }

    to {
        opacity: 1;
        top: 120%;
    }
}

.multiple-select>.multiple-select-items {
    position: absolute;
    display: none;
    top: 120%;
    left: 0px;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    animation-name: open;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    z-index: 9;

}

.multiple-select>.multiple-select-items.open {
    display: block;
}

.multiple-select>.multiple-select-items>div {
    padding: 9px 17px 11px 17px;
    cursor: pointer;

}

.multiple-select>.multiple-select-items>div.selected {
    color: blue;
}

.multiple-select>.multiple-select-items>div:hover {
    background-color: rgba(137, 190, 178, 0.8);
}

.multiple-select>select {
    display: none;
}
</style>